<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>后台首页</title>
		
		<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
		<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-zh-CN.min.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<!--图表插件-->
		<link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
		<script type="text/javascript" src="layui/layui/layui.js"></script>
		<script type="text/javascript" src="js/Chart.js"></script>
		<script src="js/jconfirm/jquery-confirm.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
		<!--图表插件-->
		<script type="text/javascript" src="js/Chart.js"></script>
		<script src="js/ServerUrl.js"></script>
		<script type="text/javascript">
			$(function() {
				//生成用户数据
				$('#showtable').bootstrapTable({
					method: 'get',
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",
					url: serverUrl + "/findFiveClient",
					columns: [{
							title: '客户ID',
							field: 'id',
							sortable: false
						},
						{
							title: '客户等级',
							field: 'clientgrade',
							sortable: false
						},
						{
							title: '公司名称',
							field: 'companyname',
							sortable: false
						},
						{
							title: '最新操作日期',
							field: 'startdate'
						},
						{
							title: '状态',
							field: 'username',
							align: 'center',
							formatter: AddFunctionStatus //添加按钮
						},
						{
							title: '进度',
							field: 'username',
							align: 'center',
							formatter: AddFunctionPeriod //添加按钮
						}
					],
					locale: 'zh-CN' //中文支持,
				})
				//列表行‘操作’按钮
				function AddFunctionStatus(value, row, index) {
					// console.log(row);
					if (row.completestatus == "true") {
						return '<span class="label label-success">已完成</span>'
					} else {
						if (value == undefined) {
							return '<span class="label label-danger">待定</span>'

						} else {
							return '<span class="label label-warning">进行中</span>'

						}
					}
				}

				function AddFunctionPeriod(value, row, index) {
					// console.log(row);
					if (row.completestatus == "true") {
						return '<div class="progress progress-striped progress-sm"><div class="progress-bar progress-bar-success" style="width: 100%;"></div></div>'
					} else {
						if (value == undefined) {
							return '<div class="progress progress-striped progress-sm"><div class="progress-bar progress-bar-danger" style="width: 20%;"></div></div>'

						} else {
							return '<div class="progress progress-striped progress-sm"><div class="progress-bar progress-bar-warning" style="width: 60%;"></div></div>'

						}
					}
				}
				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findall",
					success: function(result) {
						$('#usersum').text(result.length + "位");
					},
					error: function() {
						layer.msg('更新时间时异常');
					}
				});
				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findallClient",
					success: function(result) {
						$('#clientsum').text(result.length + "单");
					},
					error: function() {
						layer.msg('更新时间时异常');
					}
				});
				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findCommentAll",
					success: function(result) {
						$('#commentsum').text(result.length + "条");
					},
					error: function() {
						layer.msg('更新时间时异常');
					}
				});
				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findQuestionsAll",
					success: function(result) {
						$('#questionsum').text(result.length + "条");
					},
					error: function() {
						layer.msg('更新时间时异常');
					}
				});
				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findRankClient",
					success: function(result) {
						var chartY = [];
						var chartX = [];
						for (var i in result) {
							chartY.push(result[i].clientcount);
							chartX.push(result[i].username);
						}
						console.log(chartY);
						console.log(chartX);
						var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d');
						var $dashChartBarsData = {
							labels: chartX,
							datasets: [{
								label: '抢单数',
								borderWidth: 1,
								borderColor: 'rgba(0,0,0,0)',
								backgroundColor: 'rgba(51,202,185,0.5)',
								hoverBackgroundColor: "rgba(51,202,185,0.7)",
								hoverBorderColor: "rgba(0,0,0,0)",
								data: chartY
							}]
						};
						new Chart($dashChartBarsCnt, {
							type: 'bar',
							data: $dashChartBarsData
						});
					},
					error: function() {
						layer.msg('更新时间时异常');
					}
				});

			});
			$.ajax({
				//几个参数需要注意一下
				type: "get", //方法类型
				dataType: "json", //预期服务器返回的数据类型
				url: serverUrl + "/findCommentRank",
				success: function(result) {
					var chartY = [];
					var chartX = [];
					for (var i in result) {
						chartY.push(result[i].times);
						chartX.push(result[i].username);
					}
					console.log(chartY);
					console.log(chartX);
					var $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');
					var $dashChartLinesData = {
						labels: chartX,
						datasets: [{
							label: '评论数',
							data: chartY,
							borderColor: '#358ed7',
							backgroundColor: 'rgba(53, 142, 215, 0.175)',
							borderWidth: 1,
							fill: false,
							lineTension: 0.5
						}]
					};
					var myLineChart = new Chart($dashChartLinesCnt, {
						type: 'line',
						data: $dashChartLinesData,
					});
				},
				error: function() {
					layer.msg('更新时间时异常');
				}
			});
		</script>
	</head>

	<body data-logobg="color_8" data-sidebarbg="color_8">
		<div class="layout-web">
			<div class="layout-container">
				<div class="layout-sidebar-scroll">
				</div>
				<!--页面主要内容-->
				<div class="container-fluid">

					<div class="row">
						<div class="col-sm-6 col-lg-3">
							<div class="card bg-primary">
								<div class="card-body clearfix">
									<div class="pull-right">
										<p class="h6 text-white m-t-0">客户订单总数</p>
										<p class="h3 text-white m-b-0" id="clientsum"></p>
									</div>
									<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
												class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
								</div>
							</div>
						</div>

						<div class="col-sm-6 col-lg-3">
							<div class="card bg-danger">
								<div class="card-body clearfix">
									<div class="pull-right">
										<p class="h6 text-white m-t-0">业务员总数</p>
										<p class="h3 text-white m-b-0" id="usersum">0</p>
									</div>
									<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
												class="mdi mdi-account fa-1-5x"></i></span> </div>
								</div>
							</div>
						</div>

						<div class="col-sm-6 col-lg-3">
							<div class="card bg-success">
								<div class="card-body clearfix">
									<div class="pull-right">
										<p class="h6 text-white m-t-0">问答收录</p>
										<p class="h3 text-white m-b-0" id="questionsum">0</p>
									</div>
									<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
												class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
								</div>
							</div>
						</div>

						<div class="col-sm-6 col-lg-3">
							<div class="card bg-purple">
								<div class="card-body clearfix">
									<div class="pull-right">
										<p class="h6 text-white m-t-0">新增留言</p>
										<p class="h3 text-white m-b-0" id="commentsum">0</p>
									</div>
									<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
												class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
								</div>
							</div>
						</div>
					</div>

					<div class="row">

						<div class="col-lg-6">
							<div class="card">
								<div class="card-header">
									<h4>业务员抢单排行TOP7</h4>
								</div>
								<div class="card-body">
									<canvas class="js-chartjs-bars"></canvas>
								</div>
							</div>
						</div>

						<div class="col-lg-6">
							<div class="card">
								<div class="card-header">
									<h4>讨论热度排行TOP7</h4>
								</div>
								<div class="card-body">
									<canvas class="js-chartjs-lines"></canvas>
								</div>
							</div>
						</div>

					</div>

					<div class="row">

						<div class="col-lg-12">
							<div class="card">
								<div class="card-header">
									<h4>项目速览（部分）</h4>
								</div>
								<div class="card-body">
									<table id="showtable" class="table">

									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--End 页面主要内容-->
			</div>
		</div>
	</body>
</html>
